<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>发布公告</title>
		<link rel="stylesheet" href="layui/css/layui.css">
		<link rel="stylesheet" href="static/css/style.css">
		<link rel="stylesheet" href="layui/css/layuibtn.css">
	</head>
	<style>
		.roomType {
			display: block!important;
			width: 100%;
			border-color: #D2D2D2!important;
			height: 38px;
			line-height: 1.3;
			border-width: 1px;
			border-style: solid;
			background-color: #fff;
			border-radius: 2px;
			padding-left: 10px;
		}
		
		.layui-table-cell {
			height: auto;
		}
	</style>

	<body>
		<div class="container">
			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
				<legend>添加轮播图</legend>
			</fieldset>

			<form class="layui-form" action="">
				<div class="layui-form-item shangpin">
					<div class="layui-inline">
						<label class="layui-form-label">选择商品</label>
						<div class="layui-input-inline">
							<select name="modules" lay-verify="required" lay-search="" id="xiala" lay-filter="test">
								<option value="">请选择商家</option>
							</select>
						</div>
					</div>

				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">标题</label>
					<div class="layui-input-block">
						<input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input title">
					</div>
				</div>
				<style type="text/css">
					.fileimg {
						margin-left: 0;
						margin-top: 0;
						width: 100px;
						z-index: 1;
					}
					
					.filename {
						margin-left: 15px;
						color: #B2B2B2;
						margin-top: 6x;
					}
					
					#fileimg {
						width: 100px;
						height: 38px!important;
						overflow: hidden;
						height: 100px;
						opacity: 0;
						position: absolute;
						top: 0;
						left: 0;
						z-index: 10;
						margin: 0;
						padding: 0;
					}
				</style>
				<div class="layui-form-item">
					<label class="layui-form-label">图片</label>
					<div class="layui-input-block ">
						<img style="width: 150px;height: 150px;" class="logo" id="demo1" src="" />
					</div>
					<br />
					<div class="layui-input-block">
						<div class="layui-btn fileimg" id="test1">点击修改</div><span class="filename"></span>
						<input type="file" class="layui-btn fileimg" id="fileimg">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">内容</label>
					<div class="layui-input-block">
						<textarea placeholder="请输入内容" class="layui-textarea content" name="content" lay-verify="content"></textarea>
					</div>
				</div>

				<div class="layui-form-item">
					<button type="button" class="layui-btn" onclick="settijiao()">提交</button>
					<button type="button" class="layui-btn" id="quxiao">取消</button>
				</div>
				<!--<div class="layui-form-item">
					<label class="layui-form-label">上传头像</label>
					<div class="layui-input-block">
						<button type="button" class="layui-btn" id="test1"><i class="layui-icon">&#xe67c;</i>上传头像</button>
					</div>
				</div>-->
				<!--
                
                
				<div class="layui-form-item">
					<label class="layui-form-label">用户描述</label>
					<div class="layui-input-block">
						<textarea type="text" name="title" lay-verify="title" autocomplete="off" placeholder="用户描述" class="layui-input des" style="width: 500px;height: 100px;" disabled="disabled"></textarea>
					</div>
				</div>
-->
			</form>
		</div>

		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script src="js/common.js"></script>
		<script src="layui/layui.js"></script>
		<script src="layer-v3.1.1/layer/mobile/layer.js"></script>
		<script>
			//$(function() {	
			layui.use(['element', 'layer'], function() {
				var $ = layui.jquery,
					element = layui.element;
				layer = layui.layer;

			});
			$.ajax({
				type: "POST", //提交方式 
				url: baseurl + "/dining/query", //路径 
				//数据，这里使用的是Json格式进行传输 
				success: function(data) { //返回数据根据结果进行相应的处理 
					list = data.data;
					$.each(data.data, function(index, item) {
						$('#xiala').append(new Option(item.diningName, item.id)); // 下拉菜单里添加元素
					})
					form.render(); //下拉菜单渲染 把内容加载进去

				}
			});
			var announcementId = getQueryString("id");
			$.ajax({
				type: "post",
				url: baseurl + "/notice/queryOne",
				data: {
					id: announcementId
				},
				success: function(data) {
					//							alert("111")
					$(".logo").attr("src", data.data.image)
					console.log(data)
					$(".title").val(data.data.title);
					var texts = data.data.content;
					$(".content").val(texts);
				}
			});

			$("#quxiao").click(function() {
				window.parent.location.reload();
			})

			$(".fileimg").on('change', function() {
				var fileimg = document.getElementById('fileimg').files[0].name;
				var file = document.getElementById('fileimg').files[0];

				$(".filename").html("图片为：" + fileimg)
				var fd = new FormData();
				fd.append('zurl', fileimg)
				//				fd.append("tye","1111")
				//				alert(fileimg)
				//				alert(fd.fileimg)
				console.log(document.getElementById('fileimg').files[0])
				$("#demo1").attr("src", URL.createObjectURL(file));
				//				$.ajax({
				//					type: "post",
				//					url: baseurl + "/store/storeZheng",
				//					data: fd,
				//					//ajax2.0可以不用设置请求头，但是jq帮我们自动设置了，这样的话需要我们自己取消掉
				//					contentType: false,
				//					//取消帮我们格式化数据，是什么就是什么
				//					processData: false,
				//					success: function(data) {
				//						console.log(data)
				//						if(data.meta.code == 200) {
				//							console.log(data)
				//							$(".logo").attr("src", data.data)
				////							layer.alert('修改成功', function() {
				////								window.parent.location.reload();
				////							});
				//						} else {
				//							layer.alert("创建失败" + data.meta.msg);
				//						}
				//					}
				//				});
			})

			function settijiao() {
				var fileimg = document.getElementById('fileimg').files[0];
				var fd = new FormData();
				fd.append('file', fileimg)
				fd.append('title', $(".title").val());
				fd.append('content', $(".content").val());
				$.ajax({
					type: "post",
					url: baseurl + "/notice/updateNotice?id=" + announcementId,
					data: fd,
					cache: false,
					processData: false,
					contentType: false,
					success: function(data) {
						console.log(data)
						if(data.meta.code == 200) {
							//alert('修改成功');
							layer.alert('修改成功', function() {
								window.parent.location.reload();
							});
						} else {
							layer.alert("创建失败" + data.meta.msg);
						}
					}
				})
			}
		</script>
	</body>

</html>